<template>
  <div class="member-container">
    <!-- 顶部操作栏 -->
    <div class="operation-bar">
      <div class="left-actions">
        <el-button type="primary" @click="showMemberDialog = true">
          <el-icon><Plus /></el-icon>
          新增会员
        </el-button>
        <el-button type="success" @click="showLevelDialog = true">
          <el-icon><Star /></el-icon>
          等级管理
        </el-button>
        <el-button type="warning" @click="showPointsDialog = true">
          <el-icon><Coin /></el-icon>
          积分调整
        </el-button>
        <el-button type="info" @click="exportMemberData">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
      </div>
      <div class="right-actions">
        <el-select v-model="filterLevel" placeholder="会员等级" style="width: 120px" clearable>
          <el-option label="全部" value="" />
          <el-option label="普通会员" value="normal" />
          <el-option label="银卡会员" value="silver" />
          <el-option label="金卡会员" value="gold" />
          <el-option label="钻石会员" value="diamond" />
        </el-select>
        <el-select v-model="filterStatus" placeholder="状态" style="width: 100px" clearable>
          <el-option label="全部" value="" />
          <el-option label="正常" value="active" />
          <el-option label="冻结" value="frozen" />
          <el-option label="注销" value="cancelled" />
        </el-select>
        <el-input
          v-model="searchKeyword"
          placeholder="搜索会员姓名、手机号、会员号"
          style="width: 250px"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- 会员统计卡片 -->
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <div class="stat-card total">
          <div class="stat-icon">
            <el-icon :size="32"><UserFilled /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ memberStats.total }}</div>
            <div class="stat-label">总会员数</div>
            <div class="stat-change positive">+{{ memberStats.totalChange }}%</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card active">
          <div class="stat-icon">
            <el-icon :size="32"><Check /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ memberStats.active }}</div>
            <div class="stat-label">活跃会员</div>
            <div class="stat-change positive">+{{ memberStats.activeChange }}%</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card consumption">
          <div class="stat-icon">
            <el-icon :size="32"><Money /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">¥{{ formatNumber(memberStats.totalConsumption) }}</div>
            <div class="stat-label">总消费额</div>
            <div class="stat-change positive">+{{ memberStats.consumptionChange }}%</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card points">
          <div class="stat-icon">
            <el-icon :size="32"><Coin /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ formatNumber(memberStats.totalPoints) }}</div>
            <div class="stat-label">总积分</div>
            <div class="stat-change positive">+{{ memberStats.pointsChange }}%</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-section">
      <!-- 会员增长趋势 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="card-title">会员增长趋势</span>
              <el-radio-group v-model="growthChartType" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">本年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <v-chart :option="growthChartOption" :loading="chartLoading" />
          </div>
        </el-card>
      </el-col>
      
      <!-- 会员等级分布 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="card-title">会员等级分布</span>
              <el-button type="text" size="small" @click="refreshLevelChart">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </template>
          <div class="chart-container">
            <v-chart :option="levelChartOption" :loading="chartLoading" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 会员列表 -->
    <el-card class="member-list-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">会员列表</span>
          <div class="header-actions">
            <el-button type="text" size="small" @click="batchOperation">
              批量操作
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table
        :data="filteredMembers"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="memberNumber" label="会员号" width="120" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="gender" label="性别" width="60">
          <template #default="{ row }">
            {{ row.gender === 'male' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="60" />
        <el-table-column prop="level" label="等级" width="100">
          <template #default="{ row }">
            <el-tag :type="getLevelType(row.level)" size="small">
              {{ getLevelText(row.level) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="points" label="积分" width="80" sortable />
        <el-table-column prop="totalConsumption" label="累计消费" width="120" sortable>
          <template #default="{ row }">
            ¥{{ formatNumber(row.totalConsumption) }}
          </template>
        </el-table-column>
        <el-table-column prop="lastVisitTime" label="最后消费" width="150">
          <template #default="{ row }">
            {{ row.lastVisitTime ? formatDateTime(row.lastVisitTime) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" width="150">
          <template #default="{ row }">
            {{ formatDateTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="viewMemberDetail(row)">
              详情
            </el-button>
            <el-button type="text" size="small" @click="editMember(row)">
              编辑
            </el-button>
            <el-dropdown @command="handleMemberAction">
              <el-button type="text" size="small">
                更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="{ action: 'points', member: row }">
                    积分调整
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'upgrade', member: row }">
                    等级升级
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'freeze', member: row }">
                    冻结账户
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'unfreeze', member: row }">
                    解冻账户
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'delete', member: row }" divided>
                    删除会员
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalMembers"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 会员对话框 -->
    <MemberDialog
      v-model="showMemberDialog"
      :member="selectedMember"
      @success="handleMemberSuccess"
    />

    <!-- 等级管理对话框 -->
    <LevelDialog
      v-model="showLevelDialog"
      @success="handleLevelSuccess"
    />

    <!-- 积分调整对话框 -->
    <PointsDialog
      v-model="showPointsDialog"
      :member="selectedMember"
      @success="handlePointsSuccess"
    />

    <!-- 会员详情对话框 -->
    <MemberDetailDialog
      v-model="showMemberDetailDialog"
      :member="selectedMember"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Star,
  Coin,
  Download,
  Search,
  Refresh,
  UserFilled,
  Check,
  Money,
  ArrowDown
} from '@element-plus/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import MemberDialog from './components/MemberDialog.vue'
import LevelDialog from './components/LevelDialog.vue'
import PointsDialog from './components/PointsDialog.vue'
import MemberDetailDialog from './components/MemberDetailDialog.vue'
import { getMemberList, getMemberStats, exportMemberReport } from '@/api/member'
import dayjs from 'dayjs'

// 注册ECharts组件
use([
  CanvasRenderer,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 响应式数据
const searchKeyword = ref('')
const filterLevel = ref('')
const filterStatus = ref('')
const showMemberDialog = ref(false)
const showLevelDialog = ref(false)
const showPointsDialog = ref(false)
const showMemberDetailDialog = ref(false)
const selectedMember = ref(null)
const selectedMembers = ref([])
const chartLoading = ref(false)
const growthChartType = ref('month')
const currentPage = ref(1)
const pageSize = ref(20)
const totalMembers = ref(0)

// 会员统计数据
const memberStats = reactive({
  total: 1234,
  active: 856,
  totalConsumption: 2456800,
  totalPoints: 156780,
  totalChange: 12.5,
  activeChange: 8.3,
  consumptionChange: 15.2,
  pointsChange: 6.8
})

// 会员列表
const memberList = ref([
  {
    id: 1,
    memberNumber: 'M202412250001',
    name: '张三',
    phone: '13800138001',
    gender: 'male',
    age: 28,
    level: 'gold',
    points: 2580,
    totalConsumption: 15600,
    lastVisitTime: new Date(),
    status: 'active',
    createTime: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
  },
  {
    id: 2,
    memberNumber: 'M202412250002',
    name: '李四',
    phone: '13800138002',
    gender: 'female',
    age: 32,
    level: 'silver',
    points: 1280,
    totalConsumption: 8900,
    lastVisitTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
    status: 'active',
    createTime: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000)
  },
  {
    id: 3,
    memberNumber: 'M202412250003',
    name: '王五',
    phone: '13800138003',
    gender: 'male',
    age: 45,
    level: 'diamond',
    points: 5680,
    totalConsumption: 35600,
    lastVisitTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
    status: 'active',
    createTime: new Date(Date.now() - 180 * 24 * 60 * 60 * 1000)
  },
  {
    id: 4,
    memberNumber: 'M202412250004',
    name: '赵六',
    phone: '13800138004',
    gender: 'female',
    age: 26,
    level: 'normal',
    points: 580,
    totalConsumption: 2800,
    lastVisitTime: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000),
    status: 'frozen',
    createTime: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000)
  }
])

// 计算属性
const filteredMembers = computed(() => {
  let filtered = memberList.value
  
  // 按等级过滤
  if (filterLevel.value) {
    filtered = filtered.filter(member => member.level === filterLevel.value)
  }
  
  // 按状态过滤
  if (filterStatus.value) {
    filtered = filtered.filter(member => member.status === filterStatus.value)
  }
  
  // 按关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(member => 
      member.name.toLowerCase().includes(keyword) ||
      member.phone.includes(keyword) ||
      member.memberNumber.toLowerCase().includes(keyword)
    )
  }
  
  totalMembers.value = filtered.length
  
  // 分页
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filtered.slice(start, end)
})

// 图表配置
const growthChartOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '新增会员',
      type: 'line',
      smooth: true,
      data: [45, 52, 48, 61, 58, 65, 72, 68, 75, 82, 89, 95],
      itemStyle: {
        color: '#409EFF'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
          ]
        }
      }
    }
  ]
})

const levelChartOption = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '会员等级',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '18',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 456, name: '普通会员' },
        { value: 328, name: '银卡会员' },
        { value: 285, name: '金卡会员' },
        { value: 165, name: '钻石会员' }
      ]
    }
  ]
})

// 方法
const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

const formatDateTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

const getLevelType = (level) => {
  const levelMap = {
    normal: '',
    silver: 'info',
    gold: 'warning',
    diamond: 'success'
  }
  return levelMap[level] || ''
}

const getLevelText = (level) => {
  const levelMap = {
    normal: '普通会员',
    silver: '银卡会员',
    gold: '金卡会员',
    diamond: '钻石会员'
  }
  return levelMap[level] || '未知'
}

const getStatusType = (status) => {
  const statusMap = {
    active: 'success',
    frozen: 'warning',
    cancelled: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    active: '正常',
    frozen: '冻结',
    cancelled: '注销'
  }
  return statusMap[status] || '未知'
}

const handleSelectionChange = (selection) => {
  selectedMembers.value = selection
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

const viewMemberDetail = (member) => {
  selectedMember.value = member
  showMemberDetailDialog.value = true
}

const editMember = (member) => {
  selectedMember.value = member
  showMemberDialog.value = true
}

const handleMemberAction = async ({ action, member }) => {
  selectedMember.value = member
  
  switch (action) {
    case 'points':
      showPointsDialog.value = true
      break
    case 'upgrade':
      await upgradeMemberLevel(member)
      break
    case 'freeze':
      await freezeMember(member)
      break
    case 'unfreeze':
      await unfreezeMember(member)
      break
    case 'delete':
      await deleteMember(member)
      break
  }
}

const upgradeMemberLevel = async (member) => {
  try {
    const { value: newLevel } = await ElMessageBox.prompt(
      '请选择新的会员等级',
      '等级升级',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'select',
        inputOptions: {
          silver: '银卡会员',
          gold: '金卡会员',
          diamond: '钻石会员'
        }
      }
    )
    
    member.level = newLevel
    ElMessage.success('会员等级已升级')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('升级失败')
    }
  }
}

const freezeMember = async (member) => {
  try {
    await ElMessageBox.confirm(
      `确定要冻结会员 ${member.name} 的账户吗？`,
      '冻结账户',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    member.status = 'frozen'
    ElMessage.success('账户已冻结')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('冻结失败')
    }
  }
}

const unfreezeMember = async (member) => {
  try {
    await ElMessageBox.confirm(
      `确定要解冻会员 ${member.name} 的账户吗？`,
      '解冻账户',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    member.status = 'active'
    ElMessage.success('账户已解冻')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('解冻失败')
    }
  }
}

const deleteMember = async (member) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除会员 ${member.name} 吗？此操作不可恢复。`,
      '删除会员',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const index = memberList.value.findIndex(m => m.id === member.id)
    if (index > -1) {
      memberList.value.splice(index, 1)
    }
    
    ElMessage.success('会员已删除')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

const batchOperation = async () => {
  if (selectedMembers.value.length === 0) {
    ElMessage.warning('请先选择要操作的会员')
    return
  }
  
  try {
    const { value: operation } = await ElMessageBox.prompt(
      '请选择批量操作类型',
      '批量操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'select',
        inputOptions: {
          freeze: '批量冻结',
          unfreeze: '批量解冻',
          upgrade: '批量升级',
          points: '批量积分调整'
        }
      }
    )
    
    ElMessage.success(`批量${operation}操作已完成`)
    selectedMembers.value = []
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量操作失败')
    }
  }
}

const refreshLevelChart = async () => {
  chartLoading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('图表已刷新')
  } catch (error) {
    ElMessage.error('刷新失败')
  } finally {
    chartLoading.value = false
  }
}

const exportMemberData = async () => {
  try {
    ElMessage.info('正在导出会员数据...')
    // 调用导出API
    // await exportMemberReport({
    //   level: filterLevel.value,
    //   status: filterStatus.value
    // })
    
    // 模拟导出
    await new Promise(resolve => setTimeout(resolve, 2000))
    ElMessage.success('会员数据导出成功')
  } catch (error) {
    ElMessage.error('导出失败')
  }
}

const refreshData = async () => {
  try {
    await loadData()
    ElMessage.success('数据已刷新')
  } catch (error) {
    ElMessage.error('刷新失败')
  }
}

const handleMemberSuccess = () => {
  showMemberDialog.value = false
  selectedMember.value = null
  refreshData()
}

const handleLevelSuccess = () => {
  showLevelDialog.value = false
  refreshData()
}

const handlePointsSuccess = () => {
  showPointsDialog.value = false
  selectedMember.value = null
  refreshData()
}

const loadMemberStats = async () => {
  try {
    // const stats = await getMemberStats()
    // Object.assign(memberStats, stats)
  } catch (error) {
    console.error('加载会员统计失败:', error)
  }
}

const loadMemberData = async () => {
  try {
    // const members = await getMemberList({
    //   level: filterLevel.value,
    //   status: filterStatus.value,
    //   page: currentPage.value,
    //   pageSize: pageSize.value
    // })
    // memberList.value = members.list
    // totalMembers.value = members.total
  } catch (error) {
    console.error('加载会员数据失败:', error)
  }
}

const loadData = async () => {
  await Promise.all([
    loadMemberStats(),
    loadMemberData()
  ])
}

// 监听图表类型变化
watch(growthChartType, async (newType) => {
  chartLoading.value = true
  try {
    // 根据类型加载不同的数据
    await new Promise(resolve => setTimeout(resolve, 500))
  } finally {
    chartLoading.value = false
  }
})

// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.member-container {
  padding: 20px;
  background-color: var(--el-bg-color-page);
  min-height: calc(100vh - 84px);
}

.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  .left-actions {
    display: flex;
    gap: 12px;
  }
  
  .right-actions {
    display: flex;
    gap: 12px;
    align-items: center;
  }
}

.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  
  .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 20px;
  }
  
  .stat-content {
    flex: 1;
    
    .stat-number {
      font-size: 28px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin-bottom: 4px;
    }
    
    .stat-label {
      font-size: 14px;
      color: var(--el-text-color-regular);
      margin-bottom: 4px;
    }
    
    .stat-change {
      font-size: 12px;
      
      &.positive {
        color: #67c23a;
      }
      
      &.negative {
        color: #f56c6c;
      }
    }
  }
  
  &.total .stat-icon {
    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  }
  
  &.active .stat-icon {
    background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  }
  
  &.consumption .stat-icon {
    background: linear-gradient(135deg, #e6a23c 0%, #ebb563 100%);
  }
  
  &.points .stat-icon {
    background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  }
}

.charts-section {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }
  
  .chart-container {
    height: 320px;
  }
}

.member-list-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

// 响应式设计
@media (max-width: 1200px) {
  .charts-section {
    .el-col {
      margin-bottom: 20px;
    }
  }
}

@media (max-width: 768px) {
  .member-container {
    padding: 10px;
  }
  
  .operation-bar {
    flex-direction: column;
    gap: 16px;
    
    .left-actions,
    .right-actions {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }
  }
  
  .stats-cards {
    .el-col {
      margin-bottom: 12px;
    }
  }
  
  .stat-card {
    padding: 16px;
    
    .stat-icon {
      width: 50px;
      height: 50px;
      margin-right: 16px;
    }
    
    .stat-content .stat-number {
      font-size: 24px;
    }
  }
  
  .chart-card {
    height: 300px;
    
    .chart-container {
      height: 220px;
    }
  }
}
</style>